<template>
    <div>
        <el-dialog title='学生档案信息' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view">
                <div class="studio-view">
                    <div class="teacher-view" :class="index == 0?'div-select-view':'div-no-select-view'"
                         v-for="(item,index) in studentInfoList" :key="index">
                        <div>
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="dialog-bottom-view">
                    <div class="common-bottom-view">
                        <div class="common-item-view">
                            <div style="flex:1">
                                学生姓名 : {{studentInfo.name}}
                            </div>
                            <div style="flex:1">
                                出生日期 : {{studentInfo.birthday}}
                            </div>
                            <div style="flex:1">
                                性别 : {{studentInfo.gender}}
                            </div>
                        </div>
                        <div class="common-item-view">
                            <div style="flex:1">
                                所属学校 : {{studentInfo.dept_name}}
                            </div>
                            <div style="flex:1">
                                入学时间 : {{studentInfo.sign_time}}
                            </div>
                            <div style="flex:1">
                                是否在校 : {{studentInfo.inschool}}
                            </div>
                        </div>
                        <div class="common-item-view">
                            <div style="flex:2">
                                户籍所在地 : {{studentInfo.residence}}
                            </div>
                            <div style="flex:1">
                                监护人 : {{studentInfo.guardian_name}}
                            </div>
                        </div>
                        <div class="common-item-view">
                            <div style="flex:1">
                                电话号码 : {{studentInfo.guardian_telephone}}
                            </div>
                            <div style="flex:1">
                                所属关系 : {{studentInfo.guardian_relation}}
                            </div>
                            <div style="flex:1">
                                紧急联系人 : {{studentInfo.guardian_name}}
                            </div>
                        </div>
                        <div class="common-item-view">
                            <div style="flex:1">
                                障碍类型 : {{studentInfo.disabled_type}}
                            </div>
                            <div style="flex:1">
                                备注 : {{studentInfo.remarker}}
                            </div>
                            <div style="flex:1">
                                喜好 : {{studentInfo.interest}}
                            </div>
                        </div>
                    </div>
                    <div class="bottom-right-view">
                        <div class="right-view-title">
                            学生照片
                        </div>
                        <div>
                            <el-image class="header-view" :src="studentInfo.imageUrl"></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 10px">
                <el-button style="width: 180px;"  type="primary" round>确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getStudentBaseData} from '@/api/student.js'
    export default {
        props: ['isShowDialog','selectStudentId'],
        data() {
            return {
                studentHeaderUrl:'',
                studentInfoList: [
                    {
                        id: '1',
                        name: '学生详细资料'
                    },
                    {
                        id: '2',
                        name: '残疾证或残疾证明'
                    },
                    {
                        id: '3',
                        name: '学生户口本'
                    },
                    {
                        id: '4',
                        name: '入学体检报告'
                    },
                    {
                        id: '5',
                        name: '疫苗接种证明'
                    },
                    {
                        id: '6',
                        name: '学生保险或互助金'
                    },
                    {
                        id: '7',
                        name: '监护人身份证'
                    },
                    {
                        id: '8',
                        name: '监护人户口本'
                    },
                    {
                        id: '9',
                        name: '康复协议'
                    },
                    {
                        id: '10',
                        name: '其他'
                    }
                ],
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
                studentInfo:{}
            }
        },
        watch: {
            selectStudentId:{
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
            this.getStudentInfo();
        },
        computed: {},
        methods: {
            getStudentInfo(){
                console.log(this.selectStudentId)
                getStudentBaseData({
                    studentId:this.selectStudentId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.studentInfo = res.data
                        if (this.studentInfo.image){
                            this.studentInfo.imageUrl = process.env.VUE_APP_BASE_API + res.data.image
                        }else {
                            this.studentInfo.imageUrl = this.studentHeaderUrl
                        }
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeStudio')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:15px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border-radius: 10px;
        padding: 5px;
    }

    .stodio-view {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    .studio-view {
        width: 100%;
        height: 110px;
        border-radius: 15px;
        display: grid;
        margin-bottom: 15px;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        //水平居中
        place-items: center;

        .teacher-view {
            width: 200px;
            text-align: center;
            border-radius: 8px;
            padding: 12px 15px 12px 15px;
            margin: 0 1.6%;
            font-size: 0.09rem;
            color: white;
        }

        .div-select-view {
            background: #54a3ff;
        }

        .div-no-select-view {
            background: white;
            border: 1px solid #e2e2e2;
            border-radius: 15px;
            color: #1f2d3d;
        }
    }

    .dialog-bottom-view {
        display: flex;
        flex-direction: row;
        justify-content: left;
        border: 1px solid #e1e1e1;
        border-radius: 15px;
        height: calc(60vh - 130px);

        .common-bottom-view {
            flex: 2;
            height: 100%;
            text-align: left;
            font-weight: bold;
            font-size: 0.09rem;
            color: black;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .common-item-view {
            display: flex;
            flex-direction: row;
            height: 17%;
            padding-top: 2%;
            align-items: center;
            padding-left: 20px;
        }

        .common-item-view1 {
            margin-top: 2%;
        }
    }

    .bottom-right-view{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: center;

        .right-view-title{
            font-size: 0.1rem;
            text-align: left;
            font-weight: bold;
            color: black;
        }

        .header-view {
            width: 180px;
            height: 180px;
            margin-top: 10px
        }
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }
</style>

